<template>
	<view>
		<head-navbar :back="true" class="topBox">
			<view>
				<text>红包记录</text>
			</view>
		</head-navbar>
     <scroll-view scroll-y="true" :style="{height:getTabbarContentHeight + 'px'}" @scrolltolower="loadPage">
		<view class="content" v-for="(item,index) in list" @click="tosave(item.status,item.id,index)">
			<view class="date">订单号：{{item.orderNo}}</view>
			<text class="num">{{item.amount.toFixed(4)}}</text>
			<view class="num1">截止时间：{{item.endTime}}</view>
			<text class="num2">{{item.typeName}}</text>
			<view class="pic" v-if="item.status == 1">
				<image src="../../static/img/redbao_open.png"></image>
				<text class="yes">已领取</text>
			</view>
			<view class="pic" v-if="item.status == 2">
				<image src="../../static/img/redbao_done.png"></image>
				<text class="yes" style="color: #949494;">已过期</text>
			</view>
			<view class="pic" v-if="item.status == 0">
				<image src="../../static/img/redbao_no.png"></image>
				<text class="yes" >点击领取</text>
			</view>
		</view>
		<u-loadmore color='#949494' :status="status" bg-color="rgba(255,255,255,0)" margin-top='20' margin-bottom='15'
		 @loadmore='laodmore' :loadText="loadText" />
		 </scroll-view>
		 <u-modal v-model="show" :content="content" :show-cancel-button="true" confirm-color='#FE5900' @confirm="confirm"></u-modal>
	</view>
</template>

<script>
	import * as api from '../../api/group/index'
	export default {
		data() {
			return {
				show:false,
				getTabbarContentHeight:0,
				content:'确定领取该红包吗？',
				groupBookId:'',
				status: 'loading',
				pageNo:1,
				pageSize:15,
				pages:null,
				id:null,
				index:null,
				loadText: {
					loadmore: '获取数据错误,点击重新加载',
					loading: '努力加载中',
					nomore: '没有更多了哦'
				},
				list:[],
				 // list: [
				 //            {
				 //                id: 2,
				 //                userId: 2,
				 //                userCode: "pt000002",
				 //                type: "BONUS_E",
				 //                status: 0,
				 //                amount: 2800.2587,
				 //                orderNo: "1-pt000002-BONUS_E",
				 //                snapshot: "",
				 //                remark: "2800 = 70000 * 0.04 @ pt000004",
				 //                msg: "",
				 //                createTime: "2020-10-22 10:00:00",
				 //                updateTime: "2020-10-22 10:00:00",
				 //                endTime: "2020-10-22 10:00:00",
				 //                typeName: "抽奖红包"
				 //            },
					// 		{
					// 		    id: 2,
					// 		    userId: 2,
					// 		    userCode: "pt000002",
					// 		    type: "BONUS_E",
					// 		    status: 1,
					// 		    amount: 2800.0000,
					// 		    orderNo: "1-pt000002-BONUS_E",
					// 		    snapshot: "",
					// 		    remark: "2800 = 70000 * 0.04 @ pt000004",
					// 		    msg: "",
					// 		    createTime: "2020-10-22 10:00:00",
					// 		    updateTime: "2020-10-22 10:00:00",
					// 		    endTime: "2020-10-22 10:00:00",
					// 		    typeName: "抽奖红包"
					// 		},
					// 		{
					// 		    id: 2,
					// 		    userId: 2,
					// 		    userCode: "pt000002",
					// 		    type: "BONUS_E",
					// 		    status: 2,
					// 		    amount: 2800.0000,
					// 		    orderNo: "1-pt000002-BONUS_E",
					// 		    snapshot: "",
					// 		    remark: "2800 = 70000 * 0.04 @ pt000004",
					// 		    msg: "",
					// 		    createTime: "2020-10-22 10:00:00",
					// 		    updateTime: "2020-10-22 10:00:00",
					// 		    endTime: "2020-10-22 10:00:00",
					// 		    typeName: "抽奖红包"
					// 		}
				 //        ],
			}
		},
		onLoad(option) {
			this.childUserId = option.childUserId
			this.pageRedBag()
		},
		onReady() {
			let that = this
			uni.getSystemInfo({
				success: function(res) { // res - 各种参数
					let info = uni.createSelectorQuery().select(".topBox");
					info.boundingClientRect(function(data) { //data - 各种参数
						that.getTabbarContentHeight = res.windowHeight - data.height
					}).exec()
				}
			});
		},
		methods: {
			tosave(status,id,index){
				if(status == 0){
					this.show = true
					this.id = id
					this.index = index
				  	}
			},
			confirm(){
					this.show = true
				  	api.doRedBag({
				  		request: {
				  			id:this.id
				  		}
				  	}).then(res => {
						this.show = false
				  		 uni.showToast({
				  			title:'领取成功',
							icon:'none'
				  		 })
						 this.list[this.index].status = 1
				  	}).catch(err => {
				  		this.show = false
				  	})
			},
            loadPage() {
				if(this.pageNo <= this.pages ){
					this.pageRedBag()
				}
            },			
			laodmore() {
				this.status = 'loading'
				this.list = []
				this.pageNo = 1
				this.pageRedBag()
			},
			pageRedBag() {
				api.pageRedBag({
					page: {
						pageSize: this.pageSize,
						pageNo: this.pageNo
					}
				}).then(res => {
					this.pages = res.data.dataBody.pages
					this.pageNo++
					this.list = this.list.concat(res.data.dataBody.records)
					if(this.pageNo > this.pages){
						this.status = 'nomore'
					}
				}).catch(err => {
					this.status = 'loadmore'
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 680rpx;
		height: 230rpx;
		background-color: #fff;
		border-radius: 30rpx;
		margin-left: 35rpx;
		margin-top: 24rpx;
		position: relative;

		.date {
			padding: 15rpx 0 14rpx 30rpx;
			font-size: 15rpx;
		}

		.num {
			padding-left: 26rpx;
			color: #2B2B2B;
			font-size: 48rpx;
			font-weight: 600;
		}

		.num1 {
			padding-left: 30rpx;
			font-size: 18rpx;
			color: #999999;
			margin-bottom: 15rpx;
		}

		.num2 {
			padding-left: 30rpx;
			font-size: 24rpx;
			color: #2B2B2B;
		}

		.pic {
			position: absolute;
			right: 20rpx;
			top: 30rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;

			image {
				width: 135rpx;
				height: 135rpx;
			}

			.yes {
				font-size: 30rpx;
				color: #FF5B02;
				font-weight: 500;
				text-align: center;
			}
		}
	}
</style>
